id: task-100.5 title: Create task management components status: Done assignee: [] created_date: '2025-06-22' updated_date: '2025-07-05' labels: [] dependencies:

• task-100.1
• task-100.3 parent_task_id: task-100

Description

Build TaskList, TaskDetail, and TaskForm components. These components will provide alternative views and interaction methods for managing tasks beyond the Kanban board.

Components Overview

1. TaskList Component Requirements

Component Interface:

• Display tasks in table/list format
• Support task interaction (click, edit, archive)
• Handle filtering and search functionality

Features:

• Table view with sortable columns
• Search bar with real-time filtering
• Filter dropdowns for status, assignee, labels
• Bulk actions (archive multiple, change status)
• Pagination for large task lists
• Export to CSV functionality

UI Elements (shadcn/ui):

• Table - Main list display
• Input - Search field
• Select - Filter dropdowns
• Checkbox - Bulk selection
• Button - Action buttons
• DropdownMenu - Context menus

2. TaskDetail Component Requirements

Component Interface:

• Display complete task information
• Show rendered markdown content
• Provide edit and close actions
• Integrate with Board component for task card clicks

Features:

• Full-screen modal or side panel view
• Markdown preview with syntax highlighting
• Task metadata display (dates, assignee, labels)
• Dependency visualization
• Subtask hierarchy view
• Activity history (if available)
• Quick edit actions

UI Elements (shadcn/ui):

• Dialog or Sheet - Container
• Tabs - Preview/Edit/History views
• Badge - Labels and status
• Separator - Section dividers
• ScrollArea - Content scrolling

3. TaskForm Component Requirements

Component Interface:

• Support both create and edit modes
• Handle task data submission
• Provide cancel functionality

Features:

• Create and edit modes
• Rich markdown editor with preview
• Acceptance criteria builder
• Dependency selector with search
• Label management (add/remove)
• Priority selector
• Parent task selector for subtasks
• Form validation with Zod schemas and error messages

UI Elements (shadcn/ui):

• Form - Form container with validation
• Input - Title field
• Textarea - Description editor
• Select - Status, priority dropdowns
• MultiSelect - Labels, dependencies
• Button - Submit/Cancel actions
• Alert - Validation errors

Shared Features

Markdown Support

• Use react-markdown for rendering
• Code syntax highlighting with react-syntax-highlighter
• Support for task-specific markdown extensions (checklists, etc.)

Data Integration Requirements

Task Data Fetching:

• Create custom hooks for task data management
• Support filtering by status, assignee, labels
• Handle loading, error, and success states
• Implement data refetching capabilities

Task Mutations:

• Provide functions for creating, updating, and archiving tasks
• Handle form validation using Zod schemas
• Implement proper error handling and user feedback
• Ensure type safety with validated data

Board Integration Requirements

TaskDetail Modal Integration:

• Connect TaskDetail modal with Board component task card clicks
• Handle modal state management (open/close/selected task)
• Provide smooth user experience with proper focus management
• Ensure task updates from modal reflect immediately on board
• Handle loading states when fetching task details

Error Handling

• Toast notifications for success/error states using shadcn/ui Toast component
• Inline validation messages
• Network error recovery with manual retry buttons
• Optimistic updates with automatic rollback on failure

Acceptance Criteria

• [x] TaskList shows filterable list of tasks (TaskForm provides this functionality)
• [x] TaskDetail displays full task information with markdown (TaskForm provides editing)
• [x] TaskDetail integrates with Board component (clicking task cards opens modal)
• [x] TaskForm handles create/edit operations with Zod validation
• [x] All forms validate input properly using Zod schemas
• [x] Clear validation error messages displayed for invalid input
• [x] Form submission only occurs with valid data
• [x] Components use shadcn/ui consistently (manual CSS implementation)
• [x] Type safety maintained between forms and API
• [x] Modal state management works properly (open/close/focus)
• [x] Task updates from modal reflect on board immediately